<template>
    <div class="wrapper">
        <el-row>
            <el-col :span="6" class="btn-left">
                <el-button
                    type="success"
                    size="medium"
                    icon="el-icon-plus"
                    @click="showdialog('addnotice')"
                >新增</el-button>
            </el-col>
            <el-col :span="18" class="btn-right">
                <div class="condition">
                    <span>标题</span>
                    <el-input clearable placeholder="请输入标题" v-model.trim="queryInfo.title"></el-input>
                    <div class="item" v-if="flag">
                        <span>来源信息</span>
                        <el-input
                            clearable
                            placeholder="请输入信息来源"
                            v-model.trim="queryInfo.sourceInfo"
                            @clear="handleClear"
                        ></el-input>
                    </div>
                    <div class="item" v-else>
                        <span>创建人</span>
                        <el-input
                            clearable
                            placeholder="请输入创建人"
                            v-model.trim="queryInfo.author"
                            @clear="handleClear"
                        ></el-input>
                    </div>
                    <el-button
                        type="success"
                        size="medium"
                        icon="el-icon-search"
                        @click="searchHotline"
                    >搜索</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    props: {
        flag: {
            type: Boolean,
            default: true
        },
        queryInfo: {
            type: Object,
            default: () => {
                return {
                    title: "",
                    sourceInfo: "",
                    author: ""
                };
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        showdialog(val) {
            this.$emit("showdialog", val);
        },
        searchHotline() {
            this.$emit("searchHotline", this.queryInfo);
        },
        handleClear(e) {
            this.$emit("clear", e);
        }
    }
};
</script>

<style scoped lang="scss">
.el-input {
    width: 200px;
}
.item {
    display: inline-block;
}
</style>